<template>
  <div class='container'>
    <!-- 新增标签弹层 -->
    <el-dialog
    :visible="tagsShowDialog"
     :title="bigTitle"
     @close="handleClose"
     width="400px">
      <el-form ref="tagsForm" :model="tagsForm" :rules="tagsRules" label-width="80px">
        <el-form-item label="所属学科" prop="subjectID" >
          <el-select  style="width:280px" v-model="tagsForm.subjectID" placeholder="请选择">
            <el-option v-for="item in subOptions"  :value="item.value" :label="item.label" :key="item.value"
      ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签名称" prop="tagName">
          <el-input placeholder="请输入标签名称" v-model="tagsForm.tagName" style="width:280px"></el-input>
        </el-form-item>
        <el-form-item >
          <el-row type="flex" justify="end"  align="bottom" style="margin-bottom:-30px;margin-top:30px">
            <el-button @click="handleClose">取消</el-button>
          <el-button  type="primary" @click="confirmClick">确认</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { simple } from '@/api/hmmm/subjects'
import { add, detail, update } from '@/api/hmmm/tags'
export default {
  props: {
    tagsShowDialog: {
      type: Boolean,
      default: false
    },
    currentID: {
      type: Number,
      default: null
    },
    tagsList: {
      type: Array,
      default: null
    }
  },
  data () {
    return {
      subOptions: [],
      tagsForm: {
        subjectID: '', // 学科ID
        tagName: '' // 标签名称
      },
      tagsRules: {
        subjectID: [
          { required: true, message: '请选择学科ID', trigger: 'blur' }
        ],
        tagName: [
          { required: true, message: '请输入标签名称', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    bigTitle () {
      return this.currentID ? '编辑目录' : '新增目录'
    }
  },
  created () {
    // 渲染所属学科下拉列表框
    this.getsubjectList()
    // 编辑详情
  },
  methods: {
    // 关闭按钮
    handleClose () {
      // 手动清空表单
      this.tagsForm = {
        subjectID: '',
        tagName: ''
      }
      // 通知父组件关闭弹层
      this.$emit('update:tagsShowDialog', false)
    },
    // 渲染所属学科下拉列表框
    async getsubjectList () {
      const { data } = await simple()
      this.subOptions = data
      console.log('所属学科下拉列表框', data)
    },
    // 确定按钮
    confirmClick () {
      // 整体校验
      this.$refs.tagsForm.validate(async (isOk) => {
        if (isOk) {
          // 区分场景
          if (this.tagsForm.id) {
            // 编辑
            // 调取接口
            this.tagsForm = await update(this.tagsForm)
            // 友好提示
            this.$message.success('更改成功')
          } else {
            // 添加
            // 调取接口
            await add(this.tagsForm)
            // console.log(this.tagsForm)
            // 友好提示
            this.$message.success('添加成功')
            // 通知父组件修改页码值
            this.$emit('updatePage')
          }

          // 通知父组件刷新列表
          this.$emit('getTagsList')
          // 关闭弹层
          this.handleClose()
        }
      })
    },
    // 回显数据---编辑详情
    async detailList () {
      const { data } = await detail({ id: this.currentID, ...this.tagsList })
      console.log(data)
      this.tagsForm.subjectID = data.subjectID
      this.tagsForm.tagName = data.tagName
    }

  }
}
</script>

<style scoped lang='less'></style>
